02 HTML文档结构与标签语法

共计 1580 个字符，预计需要花费 4 分钟才能阅读完成。

在上一篇我们介绍了 HTML 是一种超文本标记语言, 主要负责编辑文本结构和文本内容, 以便浏览器能正常显示, 浏览器的解析顺序自上而下, 下面对 HTML 的文档结构展开介绍

Pycharm 中输入 : html:5 + Tab 或者 ! + Tab

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

块级标签 ：块元素一般都从新行开始，它可以容纳内联元素和其他块元素, 常见块元素是段落标签 "p"、"div"、"form" 这个块元素比较特殊，它只能用来容纳其他块元素

HTML5 的标准网页声明, 不是 html 标签, 支持 HTML5 标准的主流浏览器都可识别这个声明, 表示该网页采用 HTML5

\<!DOCTYPE> 声明位于文档中的最前面的位置，处于 \ 标签之前, 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范

而 \<!DOCTYPE> 不是 HTML 标签, 它为浏览器提供一项信息 (声明), 即 HTML 是用什么版本编写的

主要作用告知浏览器这是一个 HTML 文档，该标签是除 \<!DOCTYPE> 外所有其他 HTML 元素的容器

在上面标签中添加了 lang="en", 这个属性, 定义该网页为英文页面, lang 是 language 的简写, 定义为中文页面可以写成 : lang="zh"

该标签是所有头部元素的标签, 其中头部元素必须包含文档标题标签 \, 可以包含 js 脚本 \<script> 以及 CSS 样式 \</p> <style>、\<meta> 信息等等 </p> </blockquote> <h2 id='pk-menu-5'> 四.\<title> 标签 </h2> <blockquote> <p> 该标签它可以用来给 html 文档添加一个标题 </p> <p> 它与 \<body> 中的 \</p> <h1> 标题不同, 它是定义浏览器工具栏中的标题, 也可以是提供页面被添加到收藏夹时的标题和显示在搜索引擎结果中的页面标题 </p> <p> 并且一个 \<html> 文档只能有一个 \<title> 标题 </p> </blockquote> <h2 id='pk-menu-6'> 五.\<meta> 标签 </h2> <blockquote> <p>\<meta> 元素可提供有关页面的元信息 (mata-information), 针对搜索引擎和更新频度的描述和关键词 </p> <p> 元数据不会显示在客户端, 但是会被浏览器解析 </p> </blockquote> <ul> <li>charset 属性 (页面编码)</li> </ul> <p><code>python<br /> <meta charset="UTF-8"> # 告诉浏览器是什么编码 </code></p> <ul> <li>http-equiv 属性 (刷新和跳转)</li> </ul> <p><code>python<br /> <meta http-equiv="refresh" content="3,http://www.baidu.com"> # 3 秒后跳转指定网页 <br /> <meta http-equiv="refresh" content="3"> # 3 秒后跳转当前所在的网页 </code></p> <ul> <li>name 属性 </li> </ul> <p><code>python<br /> <meta name="keywords" content="网上购物, 京东, 支付"> # 关键字, 便于搜索引擎查找分类以及 seo 优化 <br /> <meta name="description" content="这是一个网上购物平台"> # 描述 </code></p> <h2 id='pk-menu-7'> 六.\<body> 标签 </h2> <blockquote> <p> 该标签定义文档的主体, 称为内容主体标签, 一般网页内容均放入到该标签组中 </p> <p> 通常我们在浏览器中看到的内容体都是在该标签内的 </p> <p> 该标签元素包含文档的所有内容, 比如文本、超链接、图像、表格和列表等等 </p> </blockquote> <h2 id='pk-menu-8'> 七. 注释 </h2> <ul> <li> 单行注释 </li> </ul> <pre><code class="language-python"> </code></pre> <ul> <li> 多行注释 </li> </ul> <pre><code class="language-python"> </code></pre> <ul> <li> 使用注释标志开始和结束位置 </li> </ul> <pre><code class="language-python"> 导航条所有的 html 代码   左侧菜单栏的 HTMl 代码  </code></pre> <h2 id='pk-menu-9'> 八. 标签分类 </h2> <h3 id='pk-menu-10'>1. 双标签 </h3> <pre><code class="language-python"><h1>...</h1> <p>...</p> <a href="#">...</a> # 等等 </code></pre> <h3 id='pk-menu-11'>2. 单标签 (自闭合标签)</h3> <pre><code class="language-python"><img src="" alt=""> <br> # 等等 </code></pre> <h2 id='pk-menu-12'> 九.HTML 特殊字符符号 </h2> <h3 id='pk-menu-13'>1. 常用 </h3> <pre><code class="language-html">©版权 © ®商标 ® 空格 &emsp; ¥ ¥ $ &#36 & & > > < < </code></pre> <h3 id='pk-menu-14'>2. 更多 </h3> <p><a href="https://www.webhek.com/post/html-enerty-code.html" target="_blank" rel="nofollow">HTML 特殊字符符号大全 </a></p> </div> <div class="t-separator c-sub t-sm mt30">正文完</div> <div class="footer-info puock-text mt20"> <div class="mt20 tags"><a href="https://songhaixing.top/tag/web/" class="pk-badge pk-badge-sm mr5 mb10"><i class="fa-solid fa-tag"></i> web</a></div> <div class="p-flex-sbc mt20 t-sm"> <div> <span>发表至：</span><a class=" mr5" href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/web/"><i class="fa-regular fa-folder-open"></i> Web</a> <a class=" mr5" href="https://songhaixing.top/category/%e5%89%8d%e7%ab%af/"><i class="fa-regular fa-folder-open"></i> 前端</a> </div> <div> <span class="c-sub"><i class="fa-regular fa-clock"></i> 2023-06-16</span> </div> </div> </div> </div> <div class="mt15 post-action-panel"> <div class="post-action-content"> <div class="d-flex justify-content-center w-100 c-sub"> <div class="circle-button puock-bg text-center " id="post-like" data-id="514"> <i class="fa-regular fa-thumbs-up t-md"></i> <span class="t-sm"></span></div> <div class="circle-button puock-bg text-center pk-modal-toggle" title="海报" data-no-title data-no-padding data-once-load="true" data-url="https://songhaixing.top/wp-admin/admin-ajax.php?action=pk_poster&id=514" ><i class="fa-regular fa-images"></i></div> <div class="circle-button puock-bg text-center pk-modal-toggle" title="分享" data-once-load="true" data-url="https://songhaixing.top/wp-admin/admin-ajax.php?action=pk_ajax_dialog_post_share&id=514"> <i class="fa fa-share-from-square t-md"></i></div> <div class="ls"> <div class="circle-button puock-bg text-center post-menu-toggle post-menus-box"><i class="fa fa-bars t-md"></i></div> </div> </div> </div> </div> </div> <div class="p-block p-flex-sc"> <div class="mr-3 p-flex-sk-0"> <img class="md-avatar mt-1" src="https://songhaixing.top/wp-content/uploads/2024/02/cropped-企业微信截图_20240224101309-96x96.png" alt="shawn" title="shawn"> </div> <div class="puock-text t-md"> <div> <span class="font-weight-bold">版权声明：</span><span>本站原创文章，由</span> <a class="a-link" href="https://songhaixing.top/author/admin/">shawn </a>2023-06-16发表，共计1580字。 </div> <div class="mt-2"> <span class="font-weight-bold c-sub">转载说明：</span><span class="c-sub">除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。</span> </div> </div> </div>  <div class="p-block pb-0"> <div class="row puock-text post-relevant"> <a href="https://songhaixing.top/14%20JS%E4%B9%8BRegExp%E5%AF%B9%E8%B1%A1%28%E6%AD%A3%E5%88%99%E5%AF%B9%E8%B1%A1%29/" class="col-6 col-md-3 post-relevant-item ww">  <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/random/1.jpg')"> <div class="title">14 JS之RegExp对象(正则对象)</div> </div> </a> <a href="https://songhaixing.top/02%20HTML%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84%E4%B8%8E%E6%A0%87%E7%AD%BE%E8%AF%AD%E6%B3%95/" class="col-6 col-md-3 post-relevant-item ww">  <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/random/1.jpg')"> <div class="title">02 HTML文档结构与标签语法</div> </div> </a> <a href="https://songhaixing.top/16%20JS%E4%B9%8B%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1/" class="col-6 col-md-3 post-relevant-item ww">  <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/random/6.jpg')"> <div class="title">16 JS之自定义对象</div> </div> </a> <a href="https://songhaixing.top/04%20JavaScript%E7%AE%80%E4%BB%8B/" class="col-6 col-md-3 post-relevant-item ww">  <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/random/2.jpg')"> <div class="title">04 JavaScript简介</div> </div> </a> </div> </div> <div class="p-block p-lf-15"> <div class="row text-center pd-links single-next-or-pre t-md "> <div class="col-6 p-border-r-1 p-0"> <a href="https://songhaixing.top/35%20JWT%20%E8%AE%A4%E8%AF%81/" rel="prev"><div class='abhl puock-text'><p class='t-line-1'>35 JWT 认证</p><span>上一篇</span></div></a> </div> <div class="col-6 p-0"> <a href="https://songhaixing.top/00%20%E5%89%8D%E7%AB%AF%E7%AE%80%E4%BB%8B/" rel="next"><div class='abhl puock-text'><p class='t-line-1'>00 前端简介</p><span>下一篇</span></div></a> </div> </div> </div>  <div class="p-block" id="comments"> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa-regular fa-comments mr-1"></i>评论（没有评论）</span> </div> <div class="mt20 clearfix" id="comment-form-box"> <form class="mt10" id="comment-form" method="post"> <div class="form-group"> <textarea placeholder="您必须要登录之后才可以进行评论" disabled id="comment" name="comment" class="form-control form-control-sm t-sm" rows="4"></textarea> </div> </form> </div> <div id="post-comments"> <div class="mt20 p-flex-s-right" > <ul class="pagination comment-ajax-load"> </ul> </div> </div> </div> </div> <div id="sidebar" class=" col-lg-4 d-none d-lg-block"> <div class="sidebar-main"> <div class="p-block"> <div class=""> <form class="global-search-form" action="https://songhaixing.top" method="get"> <div class="input-group"> <input type="text" name="s" class="form-control t-md" placeholder="搜你想搜"> </div> </form> </div> </div> <div class="widget-puock-author widget"> <div class="header" style="background-image: url('https://songhaixing.top/wp-content/uploads/2023/06/1024x768-998384-digital-digital-art-artwork-illustration-drawing.jpg')"> <img src='https://songhaixing.top/wp-content/uploads/2024/02/cropped-企业微信截图_20240224101309-96x96.png' class='avatar' alt="Shawn派大星" title="Shawn派大星"> </div> <div class="content t-md puock-text"> <div class="text-center p-2"> <div class="t-lg">Shawn派大星</div> <div class="mt10 t-sm">一支技术博客😁</div> </div> <div class="row mt10"> <div class="col-6 text-center"> <div class="c-sub t-sm">阅读量</div> <div>158023</div> </div> <div class="col-6 text-center"> <div class="c-sub t-sm">评论数</div> <div>16</div> </div> </div> </div> </div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>探言</span> </div> <div class="mt20"> <div class="widget-puock-hitokoto" data-api=""> <div class="t puock-text"> <div class="pk-skeleton _default"><div></div><div></div><div></div><div></div></div> </div> <div class="fb d-none">-「<span class="f"></span>」</div> </div> </div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>分类</span> </div> <div class="mt20"> <div class="row t-md"> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/midjourney/" class="puock-bg p-2 abhl d-inline-block w-100" title="⛵Midjourney">⛵Midjourney</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/ai/" class="puock-bg p-2 abhl d-inline-block w-100" title="AI">AI</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/django/" class="puock-bg p-2 abhl d-inline-block w-100" title="Django">Django</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/docker/" class="puock-bg p-2 abhl d-inline-block w-100" title="Docker">Docker</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/flask/" class="puock-bg p-2 abhl d-inline-block w-100" title="Flask">Flask</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/git/" class="puock-bg p-2 abhl d-inline-block w-100" title="Git">Git</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/go/" class="puock-bg p-2 abhl d-inline-block w-100" title="Go">Go</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/kafka/" class="puock-bg p-2 abhl d-inline-block w-100" title="Kafka">Kafka</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/linux/" class="puock-bg p-2 abhl d-inline-block w-100" title="Linux">Linux</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/luffy/" class="puock-bg p-2 abhl d-inline-block w-100" title="luffy">luffy</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/mysql/" class="puock-bg p-2 abhl d-inline-block w-100" title="MySQL">MySQL</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/python/" class="puock-bg p-2 abhl d-inline-block w-100" title="Python">Python</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/vue/" class="puock-bg p-2 abhl d-inline-block w-100" title="Vue">Vue</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/web/" class="puock-bg p-2 abhl d-inline-block w-100" title="Web">Web</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/wordpress/" class="puock-bg p-2 abhl d-inline-block w-100" title="Wordpress">Wordpress</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e5%89%8d%e7%ab%af/" class="puock-bg p-2 abhl d-inline-block w-100" title="前端">前端</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/" class="puock-bg p-2 abhl d-inline-block w-100" title="所有分类">所有分类</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%95%b0%e6%8d%ae%e5%ba%93/" class="puock-bg p-2 abhl d-inline-block w-100" title="数据库">数据库</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/uncategorized/" class="puock-bg p-2 abhl d-inline-block w-100" title="未分类">未分类</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e8%ae%a1%e7%ae%97%e6%9c%ba%e5%9f%ba%e7%a1%80/" class="puock-bg p-2 abhl d-inline-block w-100" title="计算机基础">计算机基础</a> </div> </div></div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>随机文章</span> </div> <div class="mt20"> <div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="10 Django框架之视图层(CBV源码剖析) ⭐" href="https://songhaixing.top/10%20Django%E6%A1%86%E6%9E%B6%E4%B9%8B%E8%A7%86%E5%9B%BE%E5%B1%82%28CBV%E6%BA%90%E7%A0%81%E5%89%96%E6%9E%90%29%20%E2%AD%90/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/73.png' class='' alt="10 Django框架之视图层(CBV源码剖析) ⭐"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="10 Django框架之视图层(CBV源码剖析) ⭐" href="https://songhaixing.top/10%20Django%E6%A1%86%E6%9E%B6%E4%B9%8B%E8%A7%86%E5%9B%BE%E5%B1%82%28CBV%E6%BA%90%E7%A0%81%E5%89%96%E6%9E%90%29%20%E2%AD%90/">10 Django框架之视图层(CBV源码剖析) ⭐</a></h2> <div class="description t-sm c-sub text-3line">引入视图层是实现业务逻辑的关键层一. 三板斧本质 HttpResponse、render、redirect...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="08 OSI七层结构介绍及相关协议" href="https://songhaixing.top/08%20OSI%E4%B8%83%E5%B1%82%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D%E5%8F%8A%E7%9B%B8%E5%85%B3%E5%8D%8F%E8%AE%AE/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/1470.gif' class='' alt="08 OSI七层结构介绍及相关协议"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="08 OSI七层结构介绍及相关协议" href="https://songhaixing.top/08%20OSI%E4%B8%83%E5%B1%82%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D%E5%8F%8A%E7%9B%B8%E5%85%B3%E5%8D%8F%E8%AE%AE/">08 OSI七层结构介绍及相关协议</a></h2> <div class="description t-sm c-sub text-3line">一.OSI 七层协议数据传输封包与解包过程对于现在学习计算机网络原理一般采用五层协议 , 即应, 表, ...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="02 不同平台更换pip源" href="https://songhaixing.top/02-%e4%b8%8d%e5%90%8c%e5%b9%b3%e5%8f%b0%e6%9b%b4%e6%8d%a2pip%e6%ba%90/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/648.png' class='' alt="02 不同平台更换pip源"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="02 不同平台更换pip源" href="https://songhaixing.top/02-%e4%b8%8d%e5%90%8c%e5%b9%b3%e5%8f%b0%e6%9b%b4%e6%8d%a2pip%e6%ba%90/">02 不同平台更换pip源</a></h2> <div class="description t-sm c-sub text-3line">引入前面介绍过通过 Pycharm 更换 pip 镜像源 : https://www.cnblogs.com...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="🐧Linux 基础" href="https://songhaixing.top/linux-%e5%9f%ba%e7%a1%80/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/uploads/2023/06/linux-1024x582.jpg' class='' alt="🐧Linux 基础"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="🐧Linux 基础" href="https://songhaixing.top/linux-%e5%9f%ba%e7%a1%80/">🐧Linux 基础</a></h2> <div class="description t-sm c-sub text-3line">Linux 🐧01 Linux 的发展 🐧04 Linux 分区的三种方案 🐧05 Linux 的七个启动级别...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="19 数据库事务(Transaction)详解" href="https://songhaixing.top/19%20%E6%95%B0%E6%8D%AE%E5%BA%93%E4%BA%8B%E5%8A%A1%28Transaction%29%E8%AF%A6%E8%A7%A3/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/928.png' class='' alt="19 数据库事务(Transaction)详解"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="19 数据库事务(Transaction)详解" href="https://songhaixing.top/19%20%E6%95%B0%E6%8D%AE%E5%BA%93%E4%BA%8B%E5%8A%A1%28Transaction%29%E8%AF%A6%E8%A7%A3/">19 数据库事务(Transaction)详解</a></h2> <div class="description t-sm c-sub text-3line">一. 事务 1. 什么是事务事务是由一条或多条 SQL 语句组成的逻辑执行单元, 可以比喻成一个容器, 里面...</div> </div> </div> </div></div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>标签云</span> </div> <div class="mt20"> <div class="widget-puock-tag-cloud"><a href='https://songhaixing.top/tag/ai%e7%a7%81%e6%9c%89%e7%9f%a5%e8%af%86%e5%ba%93/' class='badge d-none d-md-inline-block bg-info ahfff'>AI私有知识库</a><a href='https://songhaixing.top/tag/django/' class='badge d-none d-md-inline-block bg-dark ahfff'>django</a><a href='https://songhaixing.top/tag/docker/' class='badge d-none d-md-inline-block bg-secondary ahfff'>docker</a><a href='https://songhaixing.top/tag/drf/' class='badge d-none d-md-inline-block bg-dark ahfff'>drf</a><a href='https://songhaixing.top/tag/flask/' class='badge d-none d-md-inline-block bg-danger ahfff'>Flask</a><a href='https://songhaixing.top/tag/git/' class='badge d-none d-md-inline-block bg-success ahfff'>git</a><a href='https://songhaixing.top/tag/go/' class='badge d-none d-md-inline-block bg-danger ahfff'>go</a><a href='https://songhaixing.top/tag/kafka/' class='badge d-none d-md-inline-block bg-warning ahfff'>kafka</a><a href='https://songhaixing.top/tag/linux/' class='badge d-none d-md-inline-block bg-dark ahfff'>linux</a><a href='https://songhaixing.top/tag/mysql/' class='badge d-none d-md-inline-block bg-dark ahfff'>mysql</a><a href='https://songhaixing.top/tag/python/' class='badge d-none d-md-inline-block bg-warning ahfff'>python</a><a href='https://songhaixing.top/tag/vue/' class='badge d-none d-md-inline-block bg-info ahfff'>vue</a><a href='https://songhaixing.top/tag/web/' class='badge d-none d-md-inline-block bg-success ahfff'>web</a><a href='https://songhaixing.top/tag/wordpress/' class='badge d-none d-md-inline-block bg-danger ahfff'>wordpress</a><a href='https://songhaixing.top/tag/%e5%89%8d%e7%ab%af/' class='badge d-none d-md-inline-block bg-dark ahfff'>前端</a><a href='https://songhaixing.top/tag/%e5%89%8d%e7%ab%af%ef%bc%8cweb/' class='badge d-none d-md-inline-block bg-secondary ahfff'>前端，web</a><a href='https://songhaixing.top/tag/%e6%95%b0%e6%8d%ae%e5%ba%93/' class='badge d-none d-md-inline-block bg-danger ahfff'>数据库</a><a href='https://songhaixing.top/tag/%e7%a5%9e%e9%80%9a%e6%95%b0%e6%8d%ae%e5%ba%93/' class='badge d-none d-md-inline-block bg-success ahfff'>神通数据库</a><a href='https://songhaixing.top/tag/%e8%99%9a%e6%8b%9f%e7%8e%af%e5%a2%83/' class='badge d-none d-md-inline-block bg-danger ahfff'>虚拟环境</a><a href='https://songhaixing.top/tag/%e8%ae%a1%e7%ae%97%e6%9c%ba%e5%9f%ba%e7%a1%80/' class='badge d-none d-md-inline-block bg-success ahfff'>计算机基础</a></div></div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>最新评论</span> </div> <div class="mt20"> <div class="min-comments t-md"> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="yanmkxx"> <a class="puock-link" href="https://songhaixing.top/python-%e5%9f%ba%e7%a1%80/#comment-27"> <span class="ta3 link-hover">yanmkxx</span></a> <span class="c-sub t-w-400">很牛，谢谢你写的文章</span> </div> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="yanmkxx"> <a class="puock-link" href="https://songhaixing.top/01%20Docker%E7%AE%80%E4%BB%8B/#comment-26"> <span class="ta3 link-hover">yanmkxx</span></a> <span class="c-sub t-w-400"><img src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/smiley/cool.png" alt=":cool:" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <img src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/smiley/cool.png" alt=":cool:" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> </div> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="yanmkxx"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-25"> <span class="ta3 link-hover">yanmkxx</span></a> <span class="c-sub t-w-400">感谢大佬的文章，写的很好，</span> </div> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/610df4b5307599ff4fb02054cc2a77ec?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="wszzss"> <a class="puock-link" href="https://songhaixing.top/%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5.html/#comment-24"> <span class="ta3 link-hover">wszzss</span></a> <span class="c-sub t-w-400">请帮我修改下链接：微生之最，前面帮我加个www</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/song1_avatar_1688219468-96x96.png' class='min-avatar' alt="song1"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-23"> <span class="ta3 link-hover">song1</span></a> <span class="c-sub t-w-400">搜索</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/puock_avatar_1688220022.png' class='min-avatar' alt="puock"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-15"> <span class="ta3 link-hover">puock</span></a> <span class="c-sub t-w-400">(❁´◡`❁)(❁´◡`❁)(❁´◡`❁)</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/zhaochong_avatar_1688219566-96x96.jpg' class='min-avatar' alt="zhaochong"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-10"> <span class="ta3 link-hover">zhaochong</span></a> <span class="c-sub t-w-400">😄</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/zhaochong_avatar_1688219566-96x96.jpg' class='min-avatar' alt="zhaochong"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-9"> <span class="ta3 link-hover">zhaochong</span></a> <span class="c-sub t-w-400">支持</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/xing1_avatar_1688219503-96x96.png' class='min-avatar' alt="xing1"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-8"> <span class="ta3 link-hover">xing1</span></a> <span class="c-sub t-w-400">😶‍🌫️</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/song1_avatar_1688219468-96x96.png' class='min-avatar' alt="song1"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-7"> <span class="ta3 link-hover">song1</span></a> <span class="c-sub t-w-400">🫥</span> </div> </div> </div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>读者墙</span> </div> <div class="mt20"> <div class="row puock-text"> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/song1_avatar_1688219468-96x96.png' class='md-avatar' alt="song1"> <span class="t-sm">song1</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='md-avatar' alt="yanmkxx"> <span class="t-sm">yanmkxx</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/zhaochong_avatar_1688219566-96x96.jpg' class='md-avatar' alt="zhaochong"> <span class="t-sm">zhaochong</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://cn.gravatar.com/avatar/610df4b5307599ff4fb02054cc2a77ec?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='md-avatar' alt="wszzss"> <span class="t-sm">wszzss</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/puock_avatar_1688220022.png' class='md-avatar' alt="puock"> <span class="t-sm">puock</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/xing1_avatar_1688219503-96x96.png' class='md-avatar' alt="xing1"> <span class="t-sm">xing1</span> </a> </div> </div> </div> </div></div> </div> </div> </div>  </div> <div id="post-menus" class="post-menus-box"> <div id="post-menu-state" class="post-menu-toggle" title="打开或关闭文章目录"> <i class="puock-text ta3 fa fa-bars"></i> </div> <div id="post-menu-content" class="animated slideInRight mini-scroll"> <div id="post-menu-head"> </div> <div id="post-menu-content-items"></div> </div> </div>  <div id="rb-float-actions"> <div data-to-area="#comments" class="p-block"><i class="fa-regular fa-comments puock-text"></i></div> <div data-to="top" class="p-block"><i class="fa fa-arrow-up puock-text"></i></div> <div data-to="bottom" class="p-block"><i class="fa fa-arrow-down puock-text"></i></div> </div> <footer id="footer"> <div class="container"> <div class="row row-cols-md-1"> <div class="col-md-6"> <div><span class="t-md pb-2 d-inline-block border-bottom border-primary"><i class="fa-regular fa-bell"></i> 关于我们</span> </div> <p class="mt20 t-md"><strong>本软件站分享互联网技术、工作难题、软件科技，希望大家一起交流</strong></p> </div> <div class="col-md-6"> <div><span class="t-md pb-2 d-inline-block border-bottom border-primary"><i class="fa-regular fa-copyright"></i> 版权说明</span> </div> <p class="mt20 t-md"><strong>本文使用</strong> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" style="color: #00BFFF;">CC BY-SA 4.0</a> <strong>许可发布，转载请注明出处和署名。</strong> </p> </div> </div> </div> <div class="mt20 text-center t-md"> <div class="info"> <p>Copyright © 2023 Shawn派大星 | 保留版权所有. <svg t="1688222487445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2174" width="18" height="18"><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" fill="#0649D0" p-id="2175"></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" fill="#0649D0" p-id="2176"></path></svg>赣ICP备2023006278号</p> <span> <i class="fa-brands fa-wordpress"></i> Theme by <a target="_blank" class="c-sub" title="Puock v2.7.10" href="https://github.com/Licoy/wordpress-theme-puock">Puock</a> </span> </div> </div> </div> </div> </footer> </div> <div id="gt-validate-box"></div> <script data-instant>var puock_metas ={"home":"https:\/\/songhaixing.top","vd_comment":true,"vd_gt_id":"14a71faf5491db40e6d302531c6af73e","vd_type":"gt","use_post_menu":true,"is_single":true,"is_pjax":false,"main_lazy_img":false,"link_blank_open":false,"async_view_id":null,"mode_switch":true,"off_img_viewer":false,"off_code_highlighting":false};</script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/dist/js/libs.min.js?ver=2.7.10" id="puock-libs-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/layer/layer.js?ver=2.7.10" id="puock-layer-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/spark-md5.min.js?ver=2.7.10" id="puock-spark-md5-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/html2canvas.min.js?ver=2.7.10" id="puock-html2canvas-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/gt4.js?ver=2.7.10" id="puock-gt4-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/dist/js/puock.min.js?ver=2.7.10" id="puock-js"></script> <script></script><style> div.info p, div.info span { display: inline; } div.info span { display: none; } </style>  <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas> <script type="text/javascript" src="https://pan.ahap.cn/yanhua.js"></script> </body> </html>

02 HTML文档结构与标签语法

引入

零. 标签类别

一.\<!doctype html>

二.\ 标签

三.\ 标签